<template>
  <PageWrapper title="">
    <XGrid ref="xGrid"
    :stripe="true"
    :columns="columns"
    :not-checkbox="[1]"
    @create="drawer.data.show = true"
    @edit="handleEdit">
    </XGrid>

    <Drawer :show="drawer.data.show" :is-update="drawer.data.isUpdate"
            :row="drawer.data.row"
            @on-success="onSuccess"
            @on-drawer-close="onDrawerClose"/>
  </PageWrapper>
</template>
<script lang="ts" name="Org" setup>
import {reactive, ref,} from 'vue';
import {PageWrapper} from '/@/components/Page';
import {XGrid} from '/@/components/XGrid';
import Drawer from './Drawer.vue';
import {columns} from './data';

const xGrid = ref()

const drawer = reactive({data: {
  show: false,
  isUpdate: false,
  row: null,
}})

const handleEdit = (row_:any) => {
  drawer.data.show = true
  drawer.data.isUpdate = true
  drawer.data.row = row_
}

const onDrawerClose = () => {
  Object.assign(drawer, {data: {}})
}

const onSuccess = () => {
  xGrid.value.reload()
}
</script>
